<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="巡检通知单">
    <a-row>
      <a-col :span="24">巡检人：{{ inspectInfo?.checkedUserNames }}</a-col>
      <a-col :span="24">检查性质：{{ inspectInfo?.natureName }}</a-col>
      <a-col :span="24">检查设备：{{ inspectInfo?.name }}</a-col>
      <a-col :span="24">设备编号：{{ inspectInfo?.number }}</a-col>
      <a-col :span="24">设备位置：{{ inspectInfo?.address }}</a-col>
      <a-col :span="24">规格型号：{{ inspectInfo?.model }}</a-col>
      <a-col :span="24">检查日期：{{ inspectInfo?.date }}</a-col>
      <a-col :span="24">检查结果：{{ inspectInfo?.result }}</a-col>
    </a-row>
    <a-divider />
    <div class="img-box">
      图片资料：
      <a-image-preview-group v-if="imgList.length">
        <a-image v-for="(item, index) in imgList" :key="index" :src="item.fileUrl" />
      </a-image-preview-group>
      <span v-else>暂无图片</span>
    </div>
    <div class="img-title">
      <img :src="`/src/assets/erp/${imgSrc}.png`" />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getDeviceInspectInfo } from '/@/api/erp/device/inspect';
  import { getFileList } from '/@/api/system/file';

  const rowId = ref('');
  const inspectInfo = ref();
  const imgList = ref<any>([]);
  const imgSrc = ref('');
  defineEmits(['register']);

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({
      confirmLoading: false,
      destroyOnClose: true,
      showCancelBtn: false,
      showOkBtn: false,
      footer: null,
      width: 500,
    });

    rowId.value = data.id;
    inspectInfo.value = await getDeviceInspectInfo(data.id);
    imgSrc.value = inspectInfo.value?.state === 0 ? 'check_tip_no' : 'check_tip_pass';
    if (inspectInfo.value.filePath) {
      imgList.value = await getFileList({ folderId: inspectInfo.value.filePath });
    }
  });
</script>
<style lang="less" scoped>
  .ant-col {
    margin-bottom: 15px;
  }

  .img-title {
    position: absolute;
    top: 10px;
    right: 30px;
    width: 100px;
  }

  .img-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  :deep(.ant-image) {
    width: 100px;
    height: 75px;
    padding: 5px;
    border: 1px solid silver;
    border-radius: 4px;
    margin-right: 10px;
  }

  :deep(.ant-image-img) {
    height: 100%;
  }
</style>
